<template>
	<view class="userDetail">
		<!-- 个人信息页 -->
		<view>
			头像：
			<text v-if="isShow" class="status">(可修改)</text>
			<image :src="avatar" mode="widthFix" @click="chooseAvatar"></image>
		</view>
		<view>
			昵称：
			<text v-if="isShow" class="status">(可修改)</text>
			<input type="text" :disabled="!isShow" v-model="nickName">
		</view>
		<view>
			性别：
			<text v-if="isShow" class="status">(可修改)</text>
			<text class="sex" @click="changeSex">{{this.sex==0?"男":"女"}}</text>
		</view>
		<view>
			联系电话：
			<text v-if="isShow" class="status">(可修改)</text>
			<input v-if="isShow" type="tel" :disabled="!isShow" v-model="phonenumber">
			<input v-if="!isShow" type="tel" disabled v-model="phonesafe">
		</view>
		<view @click="noUpdata">
			用户名：
			<text>{{this.userName}}</text>
		</view>
		<view @click="noUpdata">
			用户ID：
			<text>{{this.userId}}</text>
		</view>
		<view @click="noUpdata">
			邮箱：
			<text>{{this.email}}</text>
		</view>
		<view @click="noUpdata">
			身份证号：
			<text>{{this.idCard}}</text>
		</view>
		<view @click="noUpdata">
			账户余额：
			<text>{{this.balance}}元</text>
		</view>
		<view @click="noUpdata">
			积分：
			<text>{{this.score}}</text>
		</view>
		
		<button
		type="primary"
		@click="edit"
		v-if="!isShow"
		>编 辑</button>
		<button
		type="primary"
		@click="modify"
		v-if="isShow"
		>修 改</button>
	</view>
</template>

<script>
	import { http } from "../../utils/request.js"
	export default {
		data() {
			return {
				isShow:false,
				myDetail:{},
				avatar:"",
				balance:"",
				email:"",
				idCard:"",
				nickName:"",
				phonenumber:"",
				phonesafe:"",
				score:"",
				sex:0,
				userId:"",
				userName:""
			};
		},
		onLoad() {
			this.getMydetail()
		},
		methods:{
			// 获取个人信息
			getMydetail(){
				http({
					url:"/prod-api/api/common/user/getInfo"
				}).then(res=>{
					if(res.data.code == 200){
						this.myDetail=res.data.user
						this.avatar=this.myDetail.avatar
						this.balance=this.myDetail.balance
						this.email=this.myDetail.email
						this.idCard=this.myDetail.idCard
						this.nickName=this.myDetail.nickName
						this.phonenumber=this.myDetail.phonenumber
						this.phonesafe=this.phonenumber.slice(0,3)+"****"+this.phonenumber.slice(7,11)
						this.score=this.myDetail.score
						this.sex=this.myDetail.sex
						this.userId=this.myDetail.userId
						this.userName=this.myDetail.userName
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			// 改变按钮和提示信息的隐藏/显示状态和信息编辑状态
			changeStatus(){
				this.isShow=!this.isShow
			},
			// 编辑
			edit(){
				uni.showToast({
					title:"进入编辑状态",
					icon:"none"
				})
				this.changeStatus()
			},
			// 更换头像
			chooseAvatar(){
				// 判断是否处于编辑状态
				if(this.isShow){
					uni.chooseImage({
						count:1,
						success:res=>{
							this.avatar=res.tempFilePaths[0]
							uni.showToast({
								title:"上传成功"
							})
							uni.uploadFile({
								url: uni.getStorageSync("BASE_URL")+'/prod-api/common/upload',
								filePath: res.tempFilePaths[0],
								header:{
									Authorization : uni.getStorageSync("token")
								},
								success: res => {
									console.log(res.data)
								}
							});
						}
					})
				}
			},
			// 更换性别
			changeSex(){
				if(this.isShow){
					uni.showActionSheet({
						itemList: ['男', '女'],
						success: res=> {
							this.sex = res.tapIndex
						}
					});
				}
			},
			// 不可修改信息点击警告
			noUpdata(){
				if(this.isShow){
					uni.showToast({
						title:"此信息不可修改",
						icon:"error"
					})
				}
			},
			// 提交修改后的个人信息
			modify(){
				http({
					url:"/prod-api/api/common/user",
					method:"PUT",
					data:{
						avatar:this.avatar,
						nickName:this.nickName,
						phonenumber:this.phonenumber,
						sex:this.sex
					}
				}).then(res=>{
					if(res.data.code == 200){
						uni.showToast({
							title:"修改成功"
						})
						this.getMydetail()
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
				this.changeStatus()
			}
		}
	}
</script>

<style lang="scss">
.userDetail{
	padding: 40rpx;
	view{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 0;
		border-bottom: 1px solid #f8f8f8;
		.status{
			flex: 1;
			color: #ccc;
		}
		input{
			text-align: right;
			width: 300rpx;
		}
		image{
			width: 150rpx;
			height: 150rpx;
			background-color: #f8f8f8;
			border: 1rpx solid #f8f8f8;
			border-radius: 20rpx;
		}
	}
	view:nth-child(1){
		margin-top: -40rpx;
	}
	button{
		margin-top: 40rpx;
		border-radius: 20rpx;
	}
	button::after{
		border: 0;
	}
}
</style>
